<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <ul>
      <!-- <li>
        <input type="checkbox" name="" id="" />
        <img src="" alt="" />
        <p></p>
        <p></p>
        <button>删除</button>
        <button>+</button> <span></span>
        <button>-</button>
      </li> -->
    </ul>
    <script type="module">
      console.log(11);
      import http from "./js/request.js";
      /*
               1-列表
               2-删除
               3-修改
             */
      async function loadList() {
        let id = localStorage.getItem("id");
        let r = await http({
          url: "/cart/list",
          //    {参数名：参数值}
          //参数名要和接口文档一致
          //   params: { id: id },
          params: { id },
        });
        console.log(r.data);
        let { cart } = r.data;
        /*
               cart_number
       :
       5
       category
       :
       "其他"
       current_price
       :
       "17.50"
       goods_id
       :
       1
       goods_number
       :
       24
       img_small_logo
       :
       "https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_200x200.jpg"
       is_hot
       :
       false
       is_sale
       :
       true
       is_select
       :
       false
       price
       :
       "25.00"
       sale_type
       :
       "70%"
       title
       :
       "南极人【10双装】夏季男士丝袜超薄中筒袜男袜子薄款透气纯色商务袜P3038"
               */
        let html = "";
        cart.forEach((v) => {
          html += `
                 <li>
                       <input  onchange="changeFN(${
                         v.goods_id
                       })" type="checkbox" name="" id="" ${
            v.is_select ? "checked" : ""
          } />
                       <img src="${v.img_small_logo}" alt="" />
                       <p>${v.title}</p>
                       <p>${v.current_price}</p>
                       <button onclick="delFN(${v.goods_id})">删除</button>
                       <button onclick="jiaFN(${v.goods_id},${
            v.cart_number
          })">+</button> <span>${v.cart_number}</span>
                       <button>-</button>
                   </li>
                 `;
        });
        document.querySelector("ul").innerHTML = html;
      }
      loadList();

      //删除--行内事件
      //   <button onclick="delFN(${v.goods_id})">删除</button>
      window.delFN = async (goods_id) => {
        let id = localStorage.getItem("id");
        console.log(goods_id);
        let r = await http({
          url: "/cart/remove",
          params: {
            id,
            goodsId: goods_id,
          },
        });
        console.log(r.data);

        //刷新列表
        loadList();
      };

      //   修改
      window.changeFN = async (goods_id) => {
        let id = localStorage.getItem("id");
        console.log(goods_id);
        let r = await http({
          url: "/cart/select",
          method: "post",
          data: {
            id,
            goodsId: goods_id,
          },
        });
        console.log(r.data);

        //刷新列表
        loadList();
      };

      //   修改数量
      window.jiaFN = async function (goodsId, number) {
        number++;
        let id = localStorage.getItem("id");
        let r = await http({
          url: "/cart/number",
          method: "post",
          data: {
            id,
            goodsId,
            number,
          },
        });
        console.log(r.data);

        //刷新列表
        loadList();
      };
    </script>
  </body>
</html>
